<template>
	<view class="reward-container">
		<view class="header">
			<view class="tip">
				<view class="text">累计奖励（元）</view>
				<view class="money">¥ {{obj.money || 0}}</view>
			</view>
			
		</view>
		<view class="wrapper">
			<view class="banner flex justify-around align-center">
				<view class="ul ">
					<view class="li">邀请好友（人）</view>
					<view class="li value">{{obj.personCount || 0}}</view>
				</view>
				<view class="ul ">
					<view class="li">完成订单（人）</view>
					<view class="li value">{{obj.succeedDealCount || 0}}</view>
				</view>
			</view>
			<view class="footer" v-if="obj">
				<view class="inner ">
					<view class="ul title flex justify-between align-center" >
						<view class="li">用户昵称</view>
						<view class="li">邀请时间</view>
						<view class="li">奖励金额</view>
					</view>
					<view class="ul flex justify-around align-center" v-for="(item,index) in obj.beInvitedPersonVos" :key="index">
						<view class="li">{{item.name | shortFilter}}</view>
						<view class="li">{{item.createdAt}}</view>
						<view class="li red">{{item.money}}</view>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import {selectInviteDetail} from '@/apis/invite/index.js'
	export default {
		data() {
			return {
				obj:{}
			}
		},
		onLoad() {
			this.init()
		},
		filters: {
			shortFilter(m){
				return m.length>4?m.slice(0,3): m
			}
		},
		methods: {
			init(){
				let info = this.$store.state.userInfo
				let {id} = info
				selectInviteDetail({inviteId:id}).then(r => {
					if(r.success){
						this.obj = r.object
					}
				})
			}
			
		}
	}
</script>

<style scoped lang="less">
	.reward-container{
		min-height: 100vh;
		background-color: rgba(247, 247, 247, 1);
	}
.header{
	width: 750rpx;
	height: 490rpx;
	background: url('/../../../static/img/reward/reward.jpg');
	background-size: 100% 100%;
	.tip{
		position: relative;
		left:64rpx;
		top: 200rpx;
	}
	.text{
		font-size: 48rpx;
		font-family: YouSheBiaoTiHei;
		color: #FFFFFF;

	}
	.money{
		font-size: 48rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
}
.wrapper{
	background-color: rgba(247, 247, 247, 1);
	// padding: 0 20rpx;
}
.banner {
	margin: 0 auto;
	position: relative;
	top: -96rpx;
	width: 708rpx;
	height: 172rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	background-color: #FFF;
	.ul{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 32rpx;
		color: #666666;
	.value{
		margin-top: 14rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}
	}
}
.footer{
	position: relative;
	top: -54rpx;
	margin: 0 20rpx;
	padding: 34rpx 0 80rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	
	.inner{
		margin: 0rpx 28rpx;
		padding:42rpx 34rpx;
		background: #F6F6F6;
		border-radius: 16px;
		.ul{
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			&.title{
				color: #666666;
				margin-bottom: 36rpx;
			}
			.red{
				color:rgba(234, 32, 39, 1);
			}
		}
	}
}
</style>
